<template lang="html">
  <div class="SJupdateBox" >
      <el-form :model="form" id="form1" v-loading.body="loading">
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span >商家名：</span>
          </el-col>
          <el-col :span="6" >
            <el-input size="small" v-model="form.name" auto-complete="off" @blur="getParam" ></el-input>
          </el-col>
          <el-col :span="6">
            <span class="gray">最多12个汉字，字符算半个</span>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span >总公司：</span>
          </el-col>
          <el-col :span="6" v-show="!checked" >
            <el-select v-model="form.parentId" size="small" placeholder="请选择">
              <el-option
                v-for="item in parents"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10" v-show="checked" >
            <el-input size="small"  v-model="form.parentName" placeholder="请输入一个总公司名(为空时默认已[总店]xx形式创建)"></el-input>
          </el-col>
          <el-col :span="2" style=" margin-left:10px; margin-top:5px;">
             <el-checkbox class="check" v-model="checked">创建总公司</el-checkbox>
          </el-col>
        </el-row> -->
        <el-row style="margin-bottom:10px;">
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span >商家类型：</span>
          </el-col>
          <el-col :span="21" class="text-left">
            <el-select v-model="value5" size="small" multiple placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <!-- <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :closable="true"
              @close="handleClose(tag)"
              :type="tag.type">
              {{tag.name}}
            </el-tag>
            <span style="display:inline-block; width:100px;">
              <el-input
                style="margin-left:10px;"
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="mini"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ New Tag</el-button>
            </span> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" >
            <span >商家logo：</span>
          </el-col>
          <el-col :span="12" style="margin-bottom:10px;" >
            <el-upload
              class="upload-demo"
              :action="$store.state.url+'/v1/upload'"
              :data="{path:'images'}"
              accept=".png,.jpeg,.jpg"
              name="files"
              :file-list="fileList2"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :on-success="handleSuccess"
              list-type="picture">
              <el-button size="small" type="success" class="btn">点击上传</el-button>
              <span slot="tip" class="el-upload__tip">请上传500x500px，清晰正面logo</span>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >所在地：</span>
          </el-col>
          <el-col :span="4" >
            <el-select v-model="add1" size="small" @change="getadd2" placeholder="请选择">
              <el-option
                v-for="(item,index) in options"
                :key="index.name"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="add" style="margin-left:10px;" >
            <el-select v-model="add2" size="small" @change="getadd3" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.name"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="add" style="margin-left:10px;">
            <el-select size="small" v-model="add3" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.name"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >详细地址：</span>
          </el-col>
          <el-col :span="6" >
            <el-input size="small" v-model="form.address" auto-complete="off" ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >详细介绍：</span>
          </el-col>
          <el-col :span="8" >
            <el-input
              v-model="form.content"
              type="textarea"
              :rows="3"
              placeholder="请输入内容">
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="text-right" style="margin-top:10px;" >
            <el-button type="success" size="small" @click="sub">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
  </div>
</template>

<script>
import axios from "axios"
import {toArr} from "../../../static/js/more.js"
var url;
export default {
  data(){
    return{
      fileList2:[],
      checked:false,
      children:'',
      loading:false,
      inputVisible:false,
      inputValue: '',
      form: {
          name:"",
          zong:"",
          company:"",
          address:"",
          city:"",
          content:"",
          parentId:''
      },
      parents:[],
      add1:'',
      add2:'',
      add3:'',
      options:[],
      options2:[],
      options3:[],
      tags: [
          { name: '景区', type: 'gray' },
          { name: '酒店', type: 'gray' }
        ],
      value5:'',
      fileName:'',
      typeList:['游玩','酒店','剧场','OTA','卡券','团体活动','教育培训']
    }
  },
  methods:{
    sub:function (){
      // if(!this.checked&&this.form.parentId==''){
      //   this.$message({
      //     showClose: true,
      //     message: '请勾选总公司',
      //     type: 'error'
      //   });
      //   return;
      // }

      // this.$store.dispatch('closeDialog','TanMerchants')
      // this.$store.dispatch('showLoading','TanMerchants');
      this.loading=true;
      var that=this;
      var str='';
      for(let i=0;i<that.value5.length;i++){
        str=str+that.value5[i]+',';
      }
      axios.get(url+'/v1/businessmen/put/businessmen', {
        params: {
          address:that.form.address,
          id:that.$store.state.TanMerchants.id,
        	areaCode:that.add3,
          cityCode:that.add2,
          logo:that.fileName,
          name:that.form.name,
          parentId:that.form.parentId,
          provinceCode:that.add1,
          remark:that.form.content,
          typeNames:str
        }
      }).then(function (res) {
        if(res.data.code==0){
          that.$message({
            showClose: true,
            message: '成功',
            type: 'success'
          });
          that.$store.dispatch('closeDialog','TanMerchants');

          var json1={
            cityCode:'',
            name:'',
            pageCount:10,
            pageIndex:1
          };
          that.$store.dispatch('getMerchantsSJ',json1);
          that.loading=false;
        }else{
          that.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
          that.loading=false;
        }

      })
      .catch(function (err) {

      });
    },
    handleChange(file, fileList) {
      this.fileList2 = fileList.slice(-1);
    },
    handleSuccess:function (response, file, fileList){
      console.log(response.data);
      this.fileName=response.data[0];
    },
    beforeUpload (file) {
      if (this.fileList2.length > 1) {
        this.$message({
        type: 'error',
        message: '最多上传1张图片',
        duration: 1000
        })
        return false
      }
    },
    addChildren:function (){
      console.log("111");
    },
    handleClose(tag) {
       this.tags.splice(this.tags.indexOf(tag), 1);
     },
    handleInputConfirm() {
      let inputValue = this.inputValue;

      if (inputValue) {
        let json={};
        json.name=inputValue;
        json.type='gray';
        this.tags.push(json);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
    getadd2:function (){
      axios.get(url+'/v1/comm/gets/city',{
         params:{
           'parentCode':this.add1
         }
      }).then((res)=>{
         this.options2=res.data.data;
      }).catch((err)=>{
         this.$message({
           showClose: true,
           message: '错误:'+err,
           type: 'error'
         });
      })
    },
    getadd3:function (){
      axios.get(url+'/v1/comm/gets/city',{
         params:{
           'parentCode':this.add2
         }
      }).then((res)=>{
         this.options3=res.data.data;
      }).catch((err)=>{
         this.$message({
           showClose: true,
           message: '错误:'+err,
           type: 'error'
         });
      })
    },
    getParam:function (){
      var that = this;
      axios.get(url+'/v1/businessmen/gets/businessmen/findByParam',{
        params:{
          isParent:1,
          name:that.form.name
        }
      }).then((res)=>{
        if(that.checked){
          for(let i in res.data.data){

          }
        }else{
          that.parents=res.data.data;
        }
      }).catch((err)=>{
        console.log(err);
      })
    },
    getMessage:function (){
      var that=this;
      axios.get(url+'/v1/businessmen/gets/businessmen/findById',{
        params:{
          id:that.$store.state.TanMerchants.id
        }
      }).then((res)=>{
       var data =res.data.data;
       that.form.name=data.name;
       that.add1=parseInt(data.provideCode);
       that.add2=parseInt(data.cityCode);
       that.add3=parseInt(data.areaCode);
       console.log(data.address);
       that.form.address=data.address;
       that.form.content=data.remarks;
       that.value5=toArr(data.typeNames);

      }).catch((err)=>{
        console.log(err);
      })
    },
    getCity:function (){
      axios.get(url+'/v1/comm/gets/city',{
       params:{}
     }).then((res)=>{
       this.options=res.data.data;
     }).catch((err)=>{
       this.$message({
         showClose: true,
         message: '错误:'+err,
         type: 'error'
       });
     })
    }
  },
  computed:{
    getId(){
      return this.$store.state.TanMerchants.id
    }
  },
  watch:{
    getId(val) {
      document.getElementById("form1").reset();
      this.fileList2=[];
      this.add1='';
      this.add2='';
      this.add3='';
      this.form.address='';
      this.form.content='';
      this.getMessage();
    }
  },
  mounted(){
    url=this.$store.state.url;
    //document.getElementById("form1").reset();
    this.getMessage();
    this.getCity();
  }
}
</script>
<style>
  .SJupdateBox .input-new-tag{display: inline;}
</style>
<style lang="Sass" scoped>
.SJupdateBox{

  span{font-size: 13px; line-height: 30px;}
  .el-dialog--small{min-width: 650px;}
  .el-dialog__header{text-align: left;}
  .el-tag{line-height: 24px; margin-left: 10px;}
  .upload-demo{text-align: left;}
  .el-upload__tip{margin-left: 10px;}
}
</style>
